<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page language="java" import="java.sql.*, helper.ConnectionHelper" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/clientTemplate.css">
        <title>Client Template</title>

    <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryValidationPassword.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryValidationConfirm.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryValidationRadio.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
    <link href="SpryAssets/SpryValidationPassword.css" rel="stylesheet" type="text/css">
    <link href="SpryAssets/SpryValidationConfirm.css" rel="stylesheet" type="text/css">
    <link href="SpryAssets/SpryValidationRadio.css" rel="stylesheet" type="text/css">
    <link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
function isSplChar(txtloginname)
{
	var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";
        for (var i = 0; i < txtloginname.value.length; i++) {
                if (iChars.indexOf(txtloginname.value.charAt(i)) != -1) {
                alert ("The box has special characters. \nThese are not allowed.\n");
                txtloginname.focus();
                return false;
        }
                }
}

    </script>

    <script type='text/javascript'>
function isAlphabet(txtfname, helperMsg){
	var alphaExp = /^[a-zA-Z]+$/;
	if(txtfname.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		txtfname.focus();
	}
}
</script>

    <script type='text/javascript'>
function isAlphabet(txtlname, helperMsg){
	var alphaExp = /^[a-zA-Z]+$/;
	if(txtlname.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		txtlname.focus();
	}
}
</script>


</head>
    <body>
    <center>
      <table id="tableClientTemplate">
            <tr id="headerClientTemplate">
                <td><%@include file="clientHeader.jsp" %></td>
            </tr>
            <tr id="middleClientTemplate">
                <td>

 <center>
     <form id="form1" name="form1" method="post" action="RegisterServlet">
  <table width="" border="0">
    <tr>
      <td width="170" align="left">&nbsp;</td>
      <td width="420" align="left"><h2>Register an Account</h2>
      </td>
    </tr>
    <tr>
        <td align="left"><span class="label"><strong>First name:</strong></span></td>
      <td align="left">      <span class="label"><span id="txtFname">
        <label for="txtfname"></label>
        <input type="text" name="txtfname" id="txtfname" >
        <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span></span></td>
    </tr>
    <tr>
      <td align="left"><strong>Last name:</strong></td>
      <td align="left"><span id="txtLname">
        <label for="txtlname"></label>
        <input type="text" name="txtlname" id="txtlname" onblur="isAlphabet(document.getElementById('txtfname'), 'Letters Only Please')" >
        <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span></td>
    </tr>
    <tr>
      <td align="left"><strong>Username:</strong></td>
      <td align="left"><span id="txtLoginname">
        <label for="txtloginname"></label>
        <input type="text" name="txtloginname" id="txtloginname" onblur="isAlphabet(document.getElementById('txtlname'), 'Letters Only Please')" >
        <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span></td>
    </tr>
    <tr>
      <td align="left"><strong>Password:</strong></td>
      <td align="left"><span id="txtPassword">
        <label for="txtpassword"></label>
        <input type="password" name="txtpassword" id="txtpassword" onblur="isSplChar(txtloginname)">
        <span class="passwordRequiredMsg">A value is required.</span><span class="passwordMinCharsMsg">Minimum number of characters not met.</span><span class="passwordMaxCharsMsg">Exceeded maximum number of characters.</span></span></td>
    </tr>
    <tr>
      <td align="left"><strong>Re-enter password:</strong></td>
      <td align="left"><span id="spryconfirm1">
        <label for="txtrepassword"></label>
        <input type="password" name="txtrepassword" id="txtrepassword">
        <span class="confirmRequiredMsg">A value is required.</span><span class="confirmInvalidMsg">The values don't match.</span></span></td>
    </tr>
    <tr>
      <td align="left"><strong>Gender:</strong></td>
      <td align="left"><p><span id="RadioGroup1">
        <label>
          <input type="radio" name="RadioGroup1" value="true" id="RadioGroup1_0" />
          Male</label>
        <br>
        <label>
          <input type="radio" name="RadioGroup1" value="false" id="RadioGroup1_1" />
          Female</label>
        <br>
        <span class="radioRequiredMsg">Please make a selection.</span></span><br />
      </p></td>
    </tr>
    <tr>
      <td align="left"><strong>Address:</strong></td>
      <td align="left"><label for="txtaddress"><span id="txtarea">
      <textarea name="txtaddress" id="txtaddress" cols="45" rows="5"></textarea>
      <span class="textareaRequiredMsg">A value is required.</span><span class="textareaMinCharsMsg">Minimum number of characters not met.</span><span class="textareaMaxCharsMsg">Exceeded maximum number of characters.</span></span></label></td>
    </tr>
    <tr>
      <td align="left">&nbsp;</td>
      <td align="left"><input type="submit" name="submit" id="submit" value="Submit" onclick="isSplChar(txtloginname); isAlphabet(document.getElementById('txtlname'), 'Letters Only Please');isAlphabet(document.getElementById('txtfname'), 'Letters Only Please')"/>
        <input type="reset" name="reset" id="reset" value="Reset" /></td>
    </tr>
  </table>
</form>
 </center>

                </td>
            </tr>
            <tr id="footerClientTemplate">
                <td><%@include file="clientFooter.jsp" %></td>
            </tr>
        </table>
        </center>
    <script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("txtFname", "none", {minChars:3, maxChars:12});
var sprytextfield2 = new Spry.Widget.ValidationTextField("txtLname", "none", {minChars:3, maxChars:12});
var sprytextfield3 = new Spry.Widget.ValidationTextField("txtLoginname", "none", {minChars:4, maxChars:12});
var sprypassword1 = new Spry.Widget.ValidationPassword("txtPassword", {minChars:4, maxChars:15});
var spryconfirm1 = new Spry.Widget.ValidationConfirm("spryconfirm1", "txtpassword");
var spryradio1 = new Spry.Widget.ValidationRadio("RadioGroup1");
var sprytextarea1 = new Spry.Widget.ValidationTextarea("txtarea", {minChars:5, maxChars:150});
    </script>
    </body>
</html>